note thumbnails images
12 changed files with 113 additions and 12 deletions
+ 1
- 0
.gitignore
@@ -7,3 +7,4 @@ node_modules |
||
| 7 | 7 |
|
| 8 | 8 |
codex/Research/* |
| 9 | 9 |
codex/Inbox/* |
| 10 |
+codex/*.thumb.png |
+ 1
- 0
app/index.html
@@ -27,6 +27,7 @@ |
||
| 27 | 27 |
<script src="scripts/controllers/note-view-ctrl.js"></script> |
| 28 | 28 |
<script src="scripts/controllers/note-edit-ctrl.js"></script> |
| 29 | 29 |
<script src="scripts/services/file-service.js"></script> |
| 30 |
+ <script src="scripts/services/thumbnail-service.js"></script> |
|
| 30 | 31 |
<script src="scripts/services/date-formatter.js" charset="utf-8"></script> |
| 31 | 32 |
|
| 32 | 33 |
<script> |
+ 0
- 2
app/scripts/controllers/app-ctrl.js
@@ -110,6 +110,4 @@ angular.module('codexApp.index', [])
|
||
| 110 | 110 |
return "../codex/" + FileService.absoluteToRelativeURL(FileService.getNotesDir(), img_url) |
| 111 | 111 |
} |
| 112 | 112 |
|
| 113 |
- |
|
| 114 |
- |
|
| 115 | 113 |
}]); |
+ 36
- 5
app/scripts/services/file-service.js
@@ -1,5 +1,5 @@ |
||
| 1 | 1 |
angular.module('codexApp')
|
| 2 |
-.service('FileService', [ '$rootScope', '$http', function($rootScope, $http) {
|
|
| 2 |
+.service('FileService', [ '$rootScope', '$http', 'ThumbnailService', function($rootScope, $http, ThumbnailService) {
|
|
| 3 | 3 |
|
| 4 | 4 |
var notes_dir = "/Users/james/dev/codex/codex"; |
| 5 | 5 |
var default_notes_dir = "/Users/james/dev/codex/codex/inbox"; |
@@ -72,6 +72,27 @@ angular.module('codexApp')
|
||
| 72 | 72 |
} |
| 73 | 73 |
} |
| 74 | 74 |
|
| 75 |
+ var getThumbnail = function(file_path) {
|
|
| 76 |
+ var type = getFileType(file_path); |
|
| 77 |
+ switch (type) {
|
|
| 78 |
+ case "Markdown": |
|
| 79 |
+ return ThumbnailService.createNoteThumbnail(file_path); |
|
| 80 |
+ default: |
|
| 81 |
+ return ""; |
|
| 82 |
+ } |
|
| 83 |
+ } |
|
| 84 |
+ |
|
| 85 |
+ var isValidFile = function(file) {
|
|
| 86 |
+ if(file != ".DS_Store" && file != "info.json") {
|
|
| 87 |
+ var parts = file.split('.');
|
|
| 88 |
+ if (parts[parts.length -2] == "thumb") {
|
|
| 89 |
+ return false; |
|
| 90 |
+ } else {
|
|
| 91 |
+ return true |
|
| 92 |
+ } |
|
| 93 |
+ } |
|
| 94 |
+ } |
|
| 95 |
+ |
|
| 75 | 96 |
var SetFileInfo = function(jsonData, dir, file_path, stat) {
|
| 76 | 97 |
//console.log(jsonData.title); |
| 77 | 98 |
if (typeof(jsonData)==='undefined') jsonData = {};
|
@@ -80,6 +101,11 @@ angular.module('codexApp')
|
||
| 80 | 101 |
} else {
|
| 81 | 102 |
var title = getNameFromPath(file_path); |
| 82 | 103 |
} |
| 104 |
+ if(jsonData.thumbnail != "" && jsonData.thumbnail != undefined){
|
|
| 105 |
+ var thumbnail_path = jsonData.thumbnail; |
|
| 106 |
+ } else {
|
|
| 107 |
+ var thumbnail_path = getThumbnail(file_path); |
|
| 108 |
+ } |
|
| 83 | 109 |
var file_obj = {
|
| 84 | 110 |
title: title, |
| 85 | 111 |
path: file_path, |
@@ -90,7 +116,8 @@ angular.module('codexApp')
|
||
| 90 | 116 |
id: jsonData.id, |
| 91 | 117 |
created_at: dateFormat(stat["birthdate"], "mediumDate"), |
| 92 | 118 |
modified_at: dateFormat(stat["mtime"], "mediumDate"), |
| 93 |
- accessed_at: dateFormat(stat["atime"], "mediumDate") |
|
| 119 |
+ accessed_at: dateFormat(stat["atime"], "mediumDate"), |
|
| 120 |
+ thumbnail: thumbnail_path |
|
| 94 | 121 |
} |
| 95 | 122 |
return file_obj; |
| 96 | 123 |
} |
@@ -130,7 +157,7 @@ angular.module('codexApp')
|
||
| 130 | 157 |
if (stat && stat.isDirectory()) {
|
| 131 | 158 |
results = results.concat(getAllFilesFromFolder(file_path)) |
| 132 | 159 |
} else {
|
| 133 |
- if(file != ".DS_Store" && file != "info.json") {
|
|
| 160 |
+ if(isValidFile(file)) {
|
|
| 134 | 161 |
var jsonData = {};
|
| 135 | 162 |
var file_obj = SetFileInfo(jsonData, dir, file_path, stat) |
| 136 | 163 |
results.push(file_obj); |
@@ -223,8 +250,7 @@ angular.module('codexApp')
|
||
| 223 | 250 |
}; |
| 224 | 251 |
} |
| 225 | 252 |
|
| 226 |
- // Absolute to relative URL |
|
| 227 |
- this.absoluteToRelativeURL = function(current_url, absolute_url) {
|
|
| 253 |
+ var absoluteToRelativeURL = function(current_url, absolute_url) {
|
|
| 228 | 254 |
// split urls and create arrays |
| 229 | 255 |
var current_path = current_url.split('/');
|
| 230 | 256 |
var absolute_path = getUrlParts(absolute_url).pathname.split('/');
|
@@ -253,6 +279,11 @@ angular.module('codexApp')
|
||
| 253 | 279 |
return relative_path; |
| 254 | 280 |
} |
| 255 | 281 |
|
| 282 |
+ // Absolute to relative URL |
|
| 283 |
+ this.absoluteToRelativeURL = function(current_url, absolute_url) {
|
|
| 284 |
+ return absoluteToRelativeURL(current_url, absolute_url); |
|
| 285 |
+ } |
|
| 286 |
+ |
|
| 256 | 287 |
|
| 257 | 288 |
// RESPONSE |
| 258 | 289 |
this.getNotes = function() {
|
+ 71
- 0
app/scripts/services/thumbnail-service.js
@@ -0,0 +1,71 @@ |
||
| 1 |
+angular.module('codexApp')
|
|
| 2 |
+.service('ThumbnailService', [ '$rootScope', '$http', function($rootScope, $http) {
|
|
| 3 |
+ |
|
| 4 |
+ var createThumbnail = function(file_path) {
|
|
| 5 |
+ //console.log("-> Creating Thumbnail for " + file_path);
|
|
| 6 |
+ var webshot = require('webshot');
|
|
| 7 |
+ var fs = require('fs');
|
|
| 8 |
+ var marked = require('marked');
|
|
| 9 |
+ |
|
| 10 |
+ var options = {
|
|
| 11 |
+ screenSize: {
|
|
| 12 |
+ width: 320 |
|
| 13 |
+ , height: 480 |
|
| 14 |
+ } |
|
| 15 |
+ , shotSize: {
|
|
| 16 |
+ width: 320 |
|
| 17 |
+ , height: 'all' |
|
| 18 |
+ } |
|
| 19 |
+ , userAgent: 'Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_2 like Mac OS X; en-us)' |
|
| 20 |
+ + ' AppleWebKit/531.21.20 (KHTML, like Gecko) Mobile/7B298g' |
|
| 21 |
+ , siteType:'html' |
|
| 22 |
+ }; |
|
| 23 |
+ |
|
| 24 |
+ var data = fs.readFileSync(file_path); |
|
| 25 |
+ var page_data = String.fromCharCode.apply(null, data); |
|
| 26 |
+ |
|
| 27 |
+ var thumbnail_path = getThumbnailName(file_path); |
|
| 28 |
+ var page = '<html><body><div class="note-container"><div class="note">' + marked(page_data); + '</div></div></body></html>'; |
|
| 29 |
+ var renderStream = webshot(page, thumbnail_path, options, function(err) {
|
|
| 30 |
+ // screenshot now saved to hello_world.png |
|
| 31 |
+ }); |
|
| 32 |
+ //var file = fs.createWriteStream('google.png', {encoding: 'binary'});
|
|
| 33 |
+ |
|
| 34 |
+ |
|
| 35 |
+ |
|
| 36 |
+ console.log("-> Created thumbnail " + thumbnail_path);
|
|
| 37 |
+ return thumbnail_path; |
|
| 38 |
+ } |
|
| 39 |
+ |
|
| 40 |
+ var getThumbnailName = function(file_path) {
|
|
| 41 |
+ var filename = file_path.split('\\').pop().split('/').pop();
|
|
| 42 |
+ var name = filename.split('.');
|
|
| 43 |
+ //if (lastIndex < 1) return ""; |
|
| 44 |
+ var path = file_path.split('/');
|
|
| 45 |
+ path.pop(); |
|
| 46 |
+ var thumb_path = path.join('/');
|
|
| 47 |
+ return thumb_path + "/" + name[0] + ".thumb.png"; |
|
| 48 |
+ } |
|
| 49 |
+ |
|
| 50 |
+ var thumbnailExists = function(file_path) {
|
|
| 51 |
+ var url = getThumbnailName(file_path); |
|
| 52 |
+ //console.log(url); |
|
| 53 |
+ // var http = new XMLHttpRequest(); |
|
| 54 |
+ // http.open('HEAD', url, false);
|
|
| 55 |
+ // http.send(); |
|
| 56 |
+ // console.log(http.status==200); |
|
| 57 |
+ // return http.status==200; |
|
| 58 |
+ var fs = require('fs');
|
|
| 59 |
+ return fs.existsSync(url); |
|
| 60 |
+ } |
|
| 61 |
+ |
|
| 62 |
+ this.createNoteThumbnail = function(file_path) {
|
|
| 63 |
+ if(thumbnailExists(file_path) == false){
|
|
| 64 |
+ return createThumbnail(file_path); |
|
| 65 |
+ } |
|
| 66 |
+ return getThumbnailName(file_path); |
|
| 67 |
+ } |
|
| 68 |
+ |
|
| 69 |
+ |
|
| 70 |
+ |
|
| 71 |
+}]) |
+ 3
- 5
app/views/index.html
@@ -22,11 +22,9 @@ |
||
| 22 | 22 |
<div class="file-view"> |
| 23 | 23 |
<ul> |
| 24 | 24 |
<li ng-repeat="file in files track by $index" ng-dblclick="openNote(file)" class="file-view-item"> |
| 25 |
- <div class="thumbnail" ng-hide="isImage(file.type)"> |
|
| 26 |
- <img src="{{getImageURL(file.path)}}">
|
|
| 27 |
- </div> |
|
| 28 |
- <div class="icon"> |
|
| 29 |
- <img src="content/imgs/file-icon.png" ng-show="isImage(file.type)"> |
|
| 25 |
+ <div class="thumbnail"> |
|
| 26 |
+ <img src="{{getImageURL(file.path)}}" ng-hide="isImage(file.type)">
|
|
| 27 |
+ <img src="{{file.thumbnail}}" ng-show="isImage(file.type)">
|
|
| 30 | 28 |
</div> |
| 31 | 29 |
<div>{{file.title}}</div>
|
| 32 | 30 |
</li> |
BIN
codex/Test-Stack/Notebook 2/Test-0001/index.thumb.png
BIN
codex/Test-Stack/Notebook 2/Test-0002/index.thumb.png
BIN
codex/dev/codex-app/highlightjs.thumb.png
BIN
codex/dev/codex-app/notes.thumb.png
BIN
codex/dev/codex-app/todos.thumb.png
+ 1
- 0
package.json
@@ -30,6 +30,7 @@ |
||
| 30 | 30 |
"electron-packager": "^5.0.0", |
| 31 | 31 |
"electron-prebuilt": "^0.33.3", |
| 32 | 32 |
"electron-rebuild": "^1.0.1", |
| 33 |
+ "webshot": "^0.16.0", |
|
| 33 | 34 |
"xo": "^0.9.0" |
| 34 | 35 |
}, |
| 35 | 36 |
"xo": {
|